<template>
    <div class="box">
        <div class="tops">
            <van-search v-model="value" @input="onInput" shape="round" placeholder="搜索" />
        </div>
        <nav v-if="!value">
            <div class="title">全部</div>
             <van-checkbox-group v-model="result">
            <van-collapse  v-model="activeNames">
                <van-collapse-item v-for="(data,index) in list"  :key="index" :name="data.depId">
                    <template #title>
                        <div class="top">{{data.areaName}}<span>({{data.userVos.length}})</span></div>
                    </template>
                    <ol>
                        <li v-for="(item,index) in data.userVos" :style="{border:index == data.userVos.length-1?'none':''}" :key="item.userId">
                            <van-checkbox :disabled="courseList.some(value=>value.userId == item.userId)" :name="item.userId">
                                {{item.username}}
                                <template #icon="props">
                                    <img class="img-icon" :src="props.checked ? 'img/xuanzhong@2x.png' : 'img/weixuanzhong@2x.png'" />
                                </template>
                                </van-checkbox>
                        </li>
                    </ol>
                </van-collapse-item>
            </van-collapse>
            </van-checkbox-group>
        </nav>

        <nav v-else>
            <van-checkbox-group v-model="result2">
                <ul>
                    <li v-for="(data,index) in searchList" :key="index">
                        <van-checkbox :disabled="courseList.some(value=>value.userId == data.id)" :name="data.id">
                            {{data.userName}}
                            <template #icon="props">
                                <img class="img-icon" :src="props.checked ? 'img/xuanzhong@2x.png' : 'img/weixuanzhong@2x.png'" />
                            </template>
                            </van-checkbox>
                    </li>
                </ul> 
            </van-checkbox-group>
        </nav>
        <!-- 底部按钮 -->
        <footer>
            <button @click="submitPeople">确定</button>
        </footer>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value:'',
            activeNames:[],
            result: [],
            result2:[],
            show:true,
            list:[],
            id:'',
            courseName:'',
            courseList:[],
            searchList:[]
        }
    },
    mounted() {
        this.id = this.$route.query.id;
        this.courseName = this.$route.query.courseName;
         (async ()=>{
            let { data } = await this.get('/user/queryDepAndUser');
            let course = await this.get('/course/queryUserByCourseId',{courseId:this.id});
            this.courseList = course.data;
            this.list = data;
        })()
    },
    methods: {
        onInput(){
            this.result2 = [];
            (async ()=>{
                let { data } = await this.get('/user/searchPeopleByKeyWord',{keyWord:this.value});
                this.searchList = data;
                console.log(this.searchList);
            })()
        },
        submitPeople(){
            
           (async ()=>{
            let values = await this.get('/user/userInfoShow',{userId:localStorage.getItem('id')});
            let adminName = values.data.userName;
            let arr = [];
            if(this.value){
                this.searchList.forEach(item=>{
                    if(this.result2.some(items=>items == item.id)){
                        arr.push(item.userName)
                    }
                })
                console.log(arr);
            }else{
                this.list.forEach(items=>{
                    items.userVos.forEach(value=>{
                        if(this.result.some(int=>value.userId == int)){
                            arr.push(value.username)
                        }
                    })
                })
            }
            
            let obj = {
                adminId:localStorage.getItem('id'),
                adminName,
                courseId:this.id,
                courseName:this.courseName,
                userIds:this.value?this.result2:this.result,
                userNames:arr
            }
            let data = await this.post('/course/addCourseAuthorityAssignment',obj);
            if(data.code == 200){
                this.Toast({
                    type:'success',
                    duration:1000,
                    message:data.msg,
                    onClose:()=>{
                        this.$router.back();
                    }
                })
            }
        })() 
        }
    },
}
</script>
<style lang="scss" scoped>
    footer{
        padding: 0 0.24rem 0.24rem;
        box-sizing: border-box;
        background: white;
        button{
            width: 100%;
            height: 0.84rem;
            background: #2E9EFF;
            font-size: 0.33rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            border: none;
            box-shadow: 1px 0.12rem 0.12rem 0.02rem rgba(4, 111, 204, 0.07);
            border-radius: 0.08rem;
        }
    }
    nav{
        flex: 1;
        overflow: scroll;
        background: white;
    }
    .box{
        height: 100%;
        background: #F7F9FA;
        display: flex;
        flex-direction: column;
    }
    .title{
        padding: 0.2rem 0.2rem;
        box-sizing: border-box;      
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #9A9A9A;
        background:#F7F9FA;
    }
    .top{
        span{
            color: #9A9A9A;
        }
    }
    .img-icon{
        width: 0.24rem;
        height: 0.24rem;
    }
    ol{
        li{
            padding: 0.1rem;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
        }
    }
    ul{
        padding: 0 0.25rem;
        box-sizing: border-box;
        li{
            display: flex;
            background: white;
            align-items: center;
            padding: 0.1rem;
             box-sizing: border-box;
            border-bottom: 1px solid #eee;
            justify-content: space-between;
            font-size: 0.28rem;
            .left{
                font-size: 0.28rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #343434;
            }
            .right{
                display: flex;
                align-items: center;
                .num{
                    font-size: 0.28rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #9A9A9A;
                    padding-right: 0.2rem;
                    box-sizing: border-box;
                    border-right: 1px solid #eee;
                }
                .under{
                    display: flex;
                    align-items: center;
                    margin-left: 0.2rem;
                    img{
                        width: 0.27rem;
                        height: 0.25rem;
                    }
                    span{            
                        font-size: 0.28rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #2A9CFF;
                    }
                }
            }
        }
    }
</style>